<script setup lang="ts">
import {
  editForm,
  menuItems,
  useUserStoreInfo,
  userData,
  refreshPage,
  editUserInfo, isShow,
} from "@/static/Homepage/Personal_data";
import {Edit, EditPen, RefreshRight} from "@element-plus/icons-vue";
import {countdown, messageCodeVis, sendCode} from "@/static/utils/send_code";


useUserStoreInfo();
</script>

<template>
  <div class="tips">
    <p>Tips：如果数据未及时更新，请刷新页面</p>
    <el-icon @click="refreshPage"><RefreshRight /></el-icon>
  </div>

  <div class="personal_data_form">

    <div class="title">
      <p>个人档案</p>
    </div>

    <el-form :model="editForm">

      <div v-for="item in menuItems" class="info_row" :key="item.label">
        <p>{{ item.label }}</p>
        <a>{{ item.data }}</a>

        <el-icon
            :style="{ visibility: item.isEdit ? 'visible' : 'hidden' }"
            @click="isShow[item.isShow] = true"
        >
          <Edit />
        </el-icon>

        <el-dialog
            v-model="isShow[item.isShow]"
            width="340"
            align-center
            :style="{ backgroundColor: '#282828' }"
        >
          <template #header>
            <div style="color: #fff; font-size: 20px;">{{ item.title }}</div>
          </template>

          <el-form-item v-if="item.label === '昵称'">
            <el-input v-model="editForm.username"
                      style="width: 310px;"
                      :prefix-icon="EditPen"
                      class="custom-color-input"
                      size="large"
                      clearable
            />
          </el-form-item>

          <el-form-item v-if="item.label === '性别'">
            <el-radio-group v-model="editForm.sex">
              <el-radio value="1" size="large" border>男</el-radio>
              <el-radio value="2" size="large" border>女</el-radio>
              <el-radio value="0" size="large" border>保密</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="item.label === '手机'">
            <span>新手机号：</span>
            <el-input v-model="editForm.telephone"
                      style="width: 220px;"
                      :prefix-icon="EditPen"
                      class="custom-color-input"
                      size="large"
                      maxlength="11"
                      clearable
            />

            <span>原手机号：</span>
            <el-input v-model="editForm.old_telephone"
                      style="width: 220px;"
                      :prefix-icon="EditPen"
                      class="custom-color-input"
                      size="large"
                      maxlength="11"
                      clearable
            />

            <span style="letter-spacing: 4px">验证码：</span>
            <el-input v-model="editForm.code"
                      style="width: 130px;"
                      :prefix-icon="EditPen"
                      class="custom-color-input"
                      size="large"
                      maxlength="4"
                      clearable
            />

            <el-button
                       size="default"
                       :disabled="messageCodeVis"
                       :type="'success'"
                       text
                       @click="sendCode('reset_telephone')">

              <span style="margin: 10px auto auto 20px; font-size: 18px"
                    v-if="countdown > 0">
                {{ `${countdown} s` }}
              </span>

              <span v-else-if="countdown == 0" style="margin-top: 10px">发送验证码</span>

            </el-button>
          </el-form-item>


          <el-form-item v-if="item.label === '邮箱'">
            <el-input v-model="editForm.email"
                      style="width: 310px;"
                      :prefix-icon="EditPen"
                      class="custom-color-input"
                      size="large"
                      clearable
            />
          </el-form-item>


          <span style="color: #65e0c2;">{{ item.description }}</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary"
                         @click="editUserInfo(item.label)">
                提交修改
              </el-button>
            </div>
          </template>
        </el-dialog>


      </div>


    </el-form>

    <div class="personal_time">
      <p>注册时间：{{ userData?.create_time }}</p>
      <p>上一次登录时间：{{ userData?.last_login }}</p>
    </div>

  </div>
</template>

<style scoped>

.custom-color-input :deep(.el-input__inner) {
  color: #ffffff;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 1px
}

.custom-color-input :deep(.el-input__icon) {
  color: #ffffff; /* 设置图标颜色 */
}

.personal_data_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px;
  width: 90%;
  height: 80%;
  border-radius: 40px;
  border: rgba(14, 250, 167, 0.36) 1px solid;
}

.title {
  display: flex;
  width: 100%;
  height: 13%;
  border-bottom: 1px solid rgba(14, 250, 167, 0.36);
}

.title p {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 2px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 80%;
}

.info_row {
  display: flex;
  width: 80%;
  height: 15%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.info_row p {
  display: flex;
  width: 50%;
  height: 100%;
  align-items: center;
  font-size: 1.3em;
  font-weight: bold;
  letter-spacing: 2px;
  color: #b8b8b8;
}

.info_row a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  font-size: 1.3em;
  letter-spacing: 1px;
  font-weight: 500;
  color: #b8b8b8;
}

.info_row i {
  display: flex;
  width: 20%;
  height: 100%;
  align-items: center;
  cursor: pointer;
  color: #b8b8b8;
}

.info_row svg {
  width: 27px;
  height: 27px;
}

.personal_time {
  display: flex;
  width: 100%;
  height: 10%;
  border-top: 1px solid rgba(14, 250, 167, 0.36);
}

.personal_time p {
  margin-left: 10%;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  align-content: center;
  flex: 1;
  color: #b8b8b8;
}

.tips {
  display: flex;
  position: absolute;
  right: 10%;
}


.tips i {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 20px;
  margin-left: 4px;
  cursor: pointer;
}

.tips svg {
  height: 20px;
  width: 20px;
}

</style>